@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white min-h-screen;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  }
}

@layer components {
  .glass-effect {
    @apply bg-white/10 backdrop-blur-md border border-white/20 rounded-xl;
  }
  
  .btn-primary {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95;
  }
  
  .btn-secondary {
    @apply bg-white/10 hover:bg-white/20 text-white border border-white/30 font-medium py-2 px-4 rounded-lg transition-all duration-200;
  }
  
  .input-field {
    @apply bg-white/10 border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
  }
}

.todo-item {
  @apply glass-effect p-4 mb-3 transition-all duration-300 hover:bg-white/15 hover:scale-[1.02];
}

.todo-completed {
  @apply opacity-60 line-through;
}

.priority-high {
  @apply border-l-4 border-red-500;
}

.priority-medium {
  @apply border-l-4 border-yellow-500;
}

.priority-low {
  @apply border-l-4 border-green-500;
}

/* 筛选器芯片样式 */
.filter-chip {
  @apply px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-200 
         flex items-center gap-1 bg-white/10 text-white/70 hover:bg-white/20 
         hover:text-white border border-white/20;
}

.filter-chip.active {
  @apply bg-blue-500 text-white border-blue-400 shadow-lg shadow-blue-500/25;
}